<template>
    <div class="person">
        <h2>姓名:{{ person.name }}</h2>
        <h2>年龄:{{ person.age }}</h2>
        <h2>汽车:{{ person.car.c1 }},{{ person.car.c2 }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changeC1">修改第一辆车名</button>
        <button @click="changeC2">修改第一辆车名</button>
        <button @click="changeCar">修改整个车</button>
    </div>
</template>

<script lang="ts" setup name="Person">
import { reactive,watch} from 'vue';
          //数据
        let person=reactive({
            name:"zhangsan",
            age:18,
            car:{
                c1:"奔驰",
                c2:"宝马"
            }
        })
//方法
        function changeName(){
            person.name+="*"
        }
        function changeAge(){
            person.age+=1
        }
        function changeC1(){
            person.car.c1="奥迪"
        }
        function changeC2(){
            person.car.c2="大众"
        }
        function changeCar(){
            person.car={c1:"小绵羊",c2:"雅迪"}
        }

//监视 情况四:监视响应式对象的某个基本数据类型的属性 name  get函数
watch(()=>{return person.name},(newValue,oldValue)=>{
    console.log("person.name改变了",newValue,oldValue)
})

//监视 情况五:监视响应式对象的某个基本数据类型的变化包括整体  ()=>person.car
watch(()=>person.car,(newValue,oldValue)=>{
    console.log("person.car改变了",newValue,oldValue)
},{deep:true})

</script>

<style>
    .person{
        background-color:skyblue;
        box-shadow:0 0 10px;
        border-radius:10px;
        padding:20px;
    }
    button{
        margin:0 5px;
    }
</style>